<template>
  <div class="summarize">
    <Row>
      <Col span="24" class="col_display">
        <div class="header_box_value">
          <div>总流量</div>
          <div class="header_value">
            {{ summarizeData.totalBytes || 0 }}&nbsp; MB
          </div>
        </div>
        <div class="header_box_value">
          <div>总包数</div>
          <div class="header_value">{{ summarizeData.totalPackets || 0 }}</div>
        </div>
        <div class="header_box_value">
          <div>带宽均值</div>
          <div class="header_value">
            {{ summarizeData.averageBandwidth }}&nbsp; Kbps
          </div>
        </div>
        <div class="header_box_value">
          <div>带宽峰值</div>
          <div class="header_value">
            {{ summarizeData.bandwidthPeak || 0 }}&nbsp; Mbps
          </div>
        </div>
        <div class="header_box_value">
          <div>上行带宽均值</div>
          <div class="header_value">
            {{ summarizeData.upstreamBytes || 0 }}&nbsp; bps
          </div>
        </div>
        <div class="header_box_value">
          <div>下行带宽均值</div>
          <div class="header_value">
            {{ summarizeData.downstreamBytes || 0 }}&nbsp; bps
          </div>
        </div>
      </Col>
      <!-- 头部数据汇总 -->
      <Col span="24" class="col_display margin_top_10">
        <div class="header_box_value">
          <div>数据包重传率</div>
          <div class="header_value">
            {{ summarizeData.packetRetransmissionRate || 0 }}&nbsp; %
          </div>
        </div>
        <div class="header_box_value">
          <div>客户端重传率</div>
          <div class="header_value">
            {{ summarizeData.tcpClientRetransmissionRate || 0 }}&nbsp; %
          </div>
        </div>
        <div class="header_box_value">
          <div>服务端重传率</div>
          <div class="header_value">
            {{ summarizeData.tcpServerRetransmissionRate || 0 }}&nbsp; %
          </div>
        </div>
        <div class="header_box_value">
          <div>告警数量</div>
          <div class="header_value">
            {{ summarizeData.numberofWarnings || 0 }}
          </div>
        </div>
        <div class="header_box_value">
          <div>客户端网络延迟均值</div>
          <div class="header_value">
            {{ summarizeData.averageLatencyofclientNetwork || 0 }}&nbsp; ms
          </div>
        </div>
        <div class="header_box_value">
          <div>服务端网络延迟均值</div>
          <div class="header_value">
            {{ summarizeData.averageLatency0fServerNetwork || 0 }}&nbsp; ms
          </div>
        </div>
      </Col>
      <!-- 进度条  三层主机 三层通讯对 top -->
      <Col span="24" class="col_display margin_top_10">
        <!-- 三层主机 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>三层主机 Top</div>
            <div>
              <Select filterable
                v-model="layerHost"
                placeholder="三层主机"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangeHost"
              >
                <Option value="1">总流量</Option>
                <Option value="2">总会话数</Option>
              </Select>
              <Tooltip
                :content="showHostTable ? '打开表格预览' : '关闭表格预览'"
                placement="top"
              >
                <Icon type="md-grid" size="16" @click="changHostTable" />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div
              v-if="showHostTable"
              class="draw_box_item_content"
              v-for="(item, index) in hostList"
              :key="index"
            >
              <div class="label_key">
                <span class="label">
                  <div>
                    {{ item.name }}
                  </div>
                </span>
                <span
                  class="pillar"
                  :style="{ width: item.width, backgroundColor: item.color }"
                ></span>
                <span class="value">{{ item.flow }}</span>
              </div>
            </div>
            <Table
              v-if="!showHostTable"
              :columns="hostTable"
              :data="hostList"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
        <!-- 三层通讯对 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>三层通讯对 Top</div>
            <div>
              <Select filterable
                v-model="layerPair"
                placeholder="三层通讯对"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangePair"
              >
                <Option value="1">总流量</Option>
                <Option value="2">总会话数</Option>
              </Select>
              <Tooltip
                :content="showPairTable ? '打开表格预览' : '关闭表格预览'"
                placement="top"
                transfer
              >
                <Icon type="md-grid" size="16" @click="chagePairTable" />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div
              v-if="showPairTable"
              class="draw_box_item_content"
              v-for="(item, index) in pairList"
              :key="index"
            >
              <div class="label_key">
                <span class="label">
                  <div>
                    {{ item.name }}
                  </div>
                </span>
                <span
                  class="pillar"
                  :style="{ width: item.width, backgroundColor: item.color }"
                ></span>
                <span class="value">{{ item.flow }}</span>
              </div>
            </div>
            <Table
              v-if="!showPairTable"
              :columns="pairTable"
              :data="pairList"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
      </Col>

      <!-- barLine 折线图、柱状图 -->
      <Col span="24" class="col_display margin_top_10">
        <!-- 以太网帧长包数统计 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>以太网帧长包数统计</div>
            <div>
              <Select filterable
                v-model="EthernetLength"
                placeholder="趋势图"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangeEthernetLength"
              >
                <Option value="1">趋势图</Option>
                <Option value="2">占比图</Option>
              </Select>
              <Tooltip
                :content="showEthernetTable ? '打开表格预览' : '关闭表格预览'"
                placement="top"
              >
                <Icon type="md-grid" size="16" @click="changEthernetTable" />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div v-if="showEthernetTable">
              <barLine
                v-if="EthernetLength == '1'"
                echartId="EthernetBarLine"
                :data="netLengthChart"
              />
              <barEchart
                v-if="EthernetLength == '2'"
                echartId="EthernetBar"
                :dataObj="ethernetChart"
                type="ethernet"
              />
              <!-- <lineEchart /> -->
            </div>
            <Table
              v-if="!showEthernetTable"
              :columns="EthernetLength == '1' ? ethernetTable : ethernetTable2"
              :data="EthernetLength == '1' ? netLengthData : ethernetData"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
        <!-- IP协议包数统计 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>IP协议包数统计</div>
            <div>
              <Select filterable
                v-model="IPpacket"
                placeholder="趋势图"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangeIPpacket"
              >
                <Option value="1">趋势图</Option>
                <Option value="2">占比图</Option>
              </Select>
              <Tooltip
                :content="showIPpacketTable ? '打开表格预览' : '关闭表格预览'"
                placement="top"
                transfer
              >
                <Icon type="md-grid" size="16" @click="chageIPpacketTable" />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div v-if="showIPpacketTable">
              <lineEchart
                v-if="IPpacket == '1'"
                echartId="IPpacketLine"
                :data="ipProtocolsTrendChart"
              />
              <barEchart
                v-if="IPpacket == '2'"
                echartId="IPpacketBar"
                :dataObj="ipProtocolChart"
                type="ipProto"
              />
            </div>
            <Table
              v-if="!showIPpacketTable"
              :columns="
                IPpacket == '1' ? protocolTypeTable : protocolTypeTable2
              "
              :data="IPpacket == '1' ? ipProtocolsData : ipProtocolData"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
      </Col>

      <!-- bar line 折线图、柱状图 -->
      <Col span="24" class="col_display margin_top_10">
        <!-- 以太网类型统计 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>以太网类型统计</div>
            <div>
              <Select filterable
                v-model="EthernetType"
                placeholder="趋势图"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangeEthernetType"
              >
                <Option value="1">趋势图</Option>
                <Option value="2">占比图</Option>
              </Select>
              <Tooltip
                :content="
                  showEthernetTypeTable ? '打开表格预览' : '关闭表格预览'
                "
                placement="top"
              >
                <Icon
                  type="md-grid"
                  size="16"
                  @click="chageEthernetTypeTable"
                />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div v-if="showEthernetTypeTable">
              <lineEchart
                v-if="EthernetType == '1'"
                echartId="EthernetTypeLine"
                :data="framesTrendChart"
              />
              <barEchart
                v-if="EthernetType == '2'"
                echartId="EthernetTypeBar"
                :dataObj="framesDataChart"
                type="netType"
              />
            </div>
            <Table
              v-if="!showEthernetTypeTable"
              :columns="EthernetType == '1' ? netTypeTable : EthernetTypeTable"
              :data="EthernetType == '1' ? framesTrend : framesData"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
        <!-- 数据包类型统计 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>数据包类型统计</div>
            <div>
              <Select filterable
                v-model="packetType"
                placeholder="趋势图"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangePacketType"
              >
                <Option value="1">趋势图</Option>
                <Option value="2">占比图</Option>
              </Select>
              <Tooltip
                :content="showpacketTypeTable ? '打开表格预览' : '关闭表格预览'"
                placement="top"
                transfer
              >
                <Icon type="md-grid" size="16" @click="chagepacketTypeTable" />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div v-if="showpacketTypeTable">
              <lineEchart
                v-if="packetType == '1'"
                echartId="packetTypeLine"
                :data="packagesTrendChart"
              />
              <barEchart
                v-if="packetType == '2'"
                echartId="packetTypeBar"
                :dataObj="packagesDataChart"
                type="page"
              />
            </div>
            <Table
              v-if="!showpacketTypeTable"
              :columns="packetType == '1' ? packageTable : packageTypeTable"
              :data="packetType == '1' ? packagesTrend : packagesData"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
      </Col>

      <!--分片包统计  bar line 折线图、柱状图 -->
      <Col span="24" class="col_display margin_top_10">
        <!-- 分片包统计 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>分片包统计</div>
            <div>
              <Select filterable
                v-model="slicePackage"
                placeholder="趋势图"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangeslicePackage"
              >
                <Option value="1">流量大小</Option>
                <Option value="2">数据包数</Option>
              </Select>
              <Tooltip
                :content="
                  showslicePackageTable ? '打开表格预览' : '关闭表格预览'
                "
                placement="top"
              >
                <Icon
                  type="md-grid"
                  size="16"
                  @click="changeslicePackageTable"
                />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div v-if="showslicePackageTable">
              <lineEchart
                v-if="slicePackage == '1'"
                echartId="slicePackageLine1"
                :data="fragmentTrafficChart"
              />
              <lineEchart
                v-if="slicePackage == '2'"
                echartId="slicePackageLine2"
                :data="fraqmentDataChart"
              />
            </div>
            <Table
              v-if="!showslicePackageTable"
              :columns="slicePackageTable"
              :data="slicePackage == '1' ? fragmentTraffic : fraqmentData"
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
        <!-- DSCP统计 -->
        <div class="draw_box">
          <div class="draw_box_header">
            <div>DSCP统计</div>
            <div>
              <Select filterable
                v-model="DSCPStatistics"
                placeholder="趋势图"
                transfer
                style="width: 150px; margin-right: 8px"
                @on-change="onChangeDSCPStatistics"
              >
                <Option value="1">趋势图</Option>
                <Option value="2">占比图</Option>
              </Select>
              <Tooltip
                :content="
                  showDSCPStatisticsTable ? '打开表格预览' : '关闭表格预览'
                "
                placement="top"
                transfer
              >
                <Icon type="md-grid" size="16" @click="changeDSCPTable" />
              </Tooltip>
            </div>
          </div>
          <div class="draw_box_content">
            <div v-if="showDSCPStatisticsTable">
              <lineEchart
                v-if="DSCPStatistics == '1'"
                echartId="DSCPStatisticsLine"
                :data="dscpTrend"
              />
              <barEchart
                v-if="DSCPStatistics == '2'"
                echartId="DSCPStatisticsBar"
                :dataObj="dscpProportion"
                type="DSCP"
              />
            </div>
            <Table
              v-if="!showDSCPStatisticsTable"
              :columns="DSCPStatistics == '1' ? dscpTable : dscpTable2"
              :data="
                DSCPStatistics == '1' ? dscpTrendTable : dscpProportionTable
              "
              height="230"
              class="table_scroll"
            >
            </Table>
          </div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import mixinConfig from './mixin.js'
import barLine from './barLine.vue'
import barEchart from './barEchart.vue'
import lineEchart from './lineEchart.vue'
import {trafficStatisticsEchart} from '@/api/integration3d';
export default {
  name: 'summarize',
  mixins: [mixinConfig],
  components: { barLine, barEchart, lineEchart },
  data () {
    return {
      topArr: [
        {
          name: '157.240.7.21',
          flow: '2.374'
        },
        {
          name: '157.240.7.21',
          flow: '12.374'
        },
        {
          name: '157.240.7.21',
          flow: '51.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
        {
          name: '157.240.7.21',
          flow: '5.374'
        },
      ],
      topArr2: [
        {
          name: '157.240.7.21',
          flow: '2.374'
        },
        {
          name: '157.240.7.21',
          flow: '57'
        },
        {
          name: '157.240.7.21',
          flow: '51'
        },
        {
          name: '157.240.7.21',
          flow: '199'
        },
        {
          name: '157.240.7.21',
          flow: '12'
        },
        {
          name: '157.240.7.21',
          flow: '234'
        },

      ],
      color: ['green', 'skyBlue', 'pink', '#999', '#1563C2 ', '#5f5f5f'],
      layerHost: '1',
      layerPair: '1',
      // 用于控制table和图表切换 三层 top
      showHostTable: true,
      showPairTable: true,
      hostTable: [
        {
          title: 'IP',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '总流量',
          key: 'flow',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],

      pairTable: [
        {
          title: 'IP',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '总流量',
          key: 'flow',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],
      dscpTable: [
        {
          title: '时间',
          key: 'time',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '名称',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '大小',
          key: 'total',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],
      dscpTable2: [
        {
          title: 'DSCP类型',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '占比',
          key: 'total',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],

      slicePackageTable: [
        {
          title: '时间',
          key: 'time',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '流量大小',
          key: 'total',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],
      // 数据包
      packageTable: [
        {
          title: '时间',
          key: 'time',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '单播数据包流量',
          key: 'unicastBytes',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '广播数据包流量',
          key: 'broadcastBytes',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '多播数据包流量',
          key: 'multicastBytes',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],
      packageTypeTable: [
        {
          title: '单播数据包流量',
          key: 'unicastBytes',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '广播数据包流量',
          key: 'broadcastBytes',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '多播数据包流量',
          key: 'multicastBytes',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        }
      ],
      // 以太网
      netTypeTable: [
        {
          title: '时间',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 140,
          render: (h, params) => {
            let time = this.$Moment(params.row.timestamp).format("YYYY-MM-DD HH:mm:ss")
            return h('div', time)
          },
        },
        {
          title: 'IPv4数据包',
          key: 'ipv4Frames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: 'IPv6数据包',
          key: 'ipv6Frames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: 'ARP数据包',
          key: 'arpFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: 'IEEE802.1x数据包',
          key: 'ieee8021xFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 150,
        },
        {
          title: 'IPX数据包',
          key: 'ipxFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: 'LACP数据包',
          key: 'lacpFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: 'MPLS数据包',
          key: 'mplsFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: 'STP数据包',
          key: 'stpFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
        {
          title: '其他类型数据包',
          key: 'otherFrames',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width: 120,
        },
      ],
      EthernetTypeTable: [
        {
          title: '数据包类型',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '包数',
          key: 'total',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
      ],

      // IP协议包数统计
      protocolTypeTable: [
        // {
        //   title: '时间',
        //   key: 'name',
        //   align: 'center',
        //   ellipsis: true,
        //   tooltip: true,
        // },
        {
          title: 'TCP总数据包',
          key: 'tcpTotalPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: 'UDP总数据包',
          key: 'udpTotalPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: 'ICMP总数据包',
          key: 'icmpTotalPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: 'ICMP6总数据包	',
          key: 'icmp6TotalPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '其他总数据包	',
          key: 'otherTotalPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
      ],
      protocolTypeTable2: [
        {
          title: '以太网帧长',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '包数',
          key: 'total',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
      ],

      // 以太网帧长
      ethernetTable2: [
        {
          title: '协议包类型',
          key: 'name',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
        {
          title: '包数',
          key: 'total',
          align: 'center',
          ellipsis: true,
          tooltip: true,
        },
      ],
      ethernetTable: [
        // {
        //   title: '时间',
        //   key: 'name',
        //   align: 'center',
        //   ellipsis: true,
        //   tooltip: true,
        // },
        {
          title: '小于64字节',
          key: 'tinyPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
        {
          title: '65~127字节',
          key: 'smallPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
        {
          title: '128~255字节',
          key: 'mediumPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
        {
          title: '256~511字节',
          key: 'bigPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
        {
          title: '512~1023字节',
          key: 'largePackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
        {
          title: '1024~1517字节',
          key: 'hugePackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
        {
          title: '大于1518字节',
          key: 'jumboPackets',
          align: 'center',
          ellipsis: true,
          tooltip: true,
          width:140,
        },
      ],

      // 定义切换赋值的变量
      hostList: [],
      pairList: [],

      // 以太网
      EthernetLength: '1',
      IPpacket: '1',
      showEthernetTable: true,
      showIPpacketTable: true,

      // 数据包类型统计
      EthernetType: '1',
      packetType: '1',
      showEthernetTypeTable: true,
      showpacketTypeTable: true,

      // 分片包统计
      slicePackage: '1',
      DSCPStatistics: '1',
      showslicePackageTable: true,
      showDSCPStatisticsTable: true,

      // 数据
      summarizeData: {},
      // 把 summarizeData 列表数据拆出来，进行排序  第一个数组为趋势图数据，第二个占比
      // 三层主机流量top 、会话
      totalFlow: [],
      totalSession: [],
      // 通讯
      ipTotalFlow: [],
      ipTotalSession: [],
      // DSCP 趋势图
      dscpTrend: [],
      dscpProportion: [],
      dscpTrendTable: [],
      dscpProportionTable: [],
      // 分片
      fragmentTraffic: [],
      fraqmentData: [],
      fragmentTrafficChart: [],
      fraqmentDataChart: [],

      // 数据包
      packagesTrend: [],
      packagesData: [],
      packagesTrendChart: [],
      packagesDataChart: {},
      // 以太网
      framesTrend: [],
      framesData: [],
      framesDataChart: {},
      framesTrendChart: [],
      // 以太网帧长包数统计
      netLengthData: [],
      netLengthChart: [],
      ethernetChart: [],
      ethernetData: [],
      // IP协议包数统计
      ipProtocolsData: [],
      ipProtocolsTrendChart: [],
      ipProtocolChart: [], // 图表
      ipProtocolData: [], //table 数据

    }
  },
  watch: {

  },
  created () {

  },
  mounted () {
    this.trafficStatisticsEchart()
    // this.sort(this.topArr, 'default')
  },
  methods: {
    sort (list, type) {
      let arr = list.sort((a, b) => {
        return b.flow - a.flow
      })
      let arr1 = arr.map((item, index) => {
        return {
          ...item,
          width: ((item.flow / arr[0].flow) * 100) + '%',
          color: this.color[index]
        }
      })
      if (type == 'default') {
        this.hostList = arr1
        this.pairList = arr1
      }
      console.log('🚀 ~ file: summarize.vue:135 ~ arr1 ~ arr1:', arr1)
      // this.topArr = arr1
      return arr1
    },

    // 三层主机
    changHostTable () {
      this.showHostTable = !this.showHostTable
    },
    onChangeHost (val) {
      if (val == 2) {
        // 判断一下，如果切换的不需要删除，节省操作性能
        if (this.hostTable[1].title == '总流量') {
          this.hostTable.pop()
          this.hostTable.push({
            title: '总会话数',
            key: 'flow',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          })
        }
        // this.hostList = this.sort(this.topArr2, val)
        this.hostList = this.totalSession
      } else {
        if (this.hostTable[1].title == '总会话数') {
          this.hostTable.pop()
          this.hostTable.push({
            title: '总流量',
            key: 'flow',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          })
        }
        // this.hostList = this.sort(this.topArr, val)
        this.hostList = this.totalFlow
      }
      console.log('========= this.hostList', this.hostList);
    },

    // 三层通讯对
    chagePairTable () {
      this.showPairTable = !this.showPairTable
    },
    onChangePair (val) {
      if (val == 2) {
        if (this.pairTable[1].title == '总流量') {
          this.pairTable.pop()
          this.pairTable.push({
            title: '总会话数',
            key: 'flow',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          })
        }
        // this.pairList = this.sort(this.topArr2, val)
        this.pairList = this.ipTotalSession
      } else {
        if (this.pairTable[1].title == '总会话数') {
          this.pairTable.pop()
          this.pairTable.push({
            title: '总流量',
            key: 'flow',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          })
        }
        // this.pairList = this.sort(this.topArr, val)
        this.pairList = this.ipTotalFlow
      }
      console.log('======ipAAddress', this.pairList);
    },

    // 
    changEthernetTable () {
      this.showEthernetTable = !this.showEthernetTable
    },

    onChangeEthernetLength (val) {
      console.log('🚀~ val:', val)
    },
    // 
    chageIPpacketTable () {
      this.showIPpacketTable = !this.showIPpacketTable
    },
    onChangeIPpacket (val) {
      console.log('🚀 ~ val:', val)
    },

    // 以太网类型统计
    onChangeEthernetType (val) {
      console.log('🚀 ~ file: summarize.vue:618 ~ onChangeEthernetType ~ val:', val)
    },
    chageEthernetTypeTable () {
      this.showEthernetTypeTable = !this.showEthernetTypeTable
    },

    // 数据包类型统计
    chagepacketTypeTable () {
      this.showpacketTypeTable = !this.showpacketTypeTable
    },
    onChangePacketType (val) {
      console.log('val:', val)
    },


    //分片包统计
    onChangeslicePackage (val) {
      console.log('val:', val)
      console.log('====fragmentTraffic', this.fragmentTraffic);
      console.log('====', this.fraqmentData);
      if (val == '1') {
        this.fragmentTraffic = this.fragmentTraffic.map(item => {
          return {
            time: item.time,
            total: item.total,
            name: '流量大小'
          }
        })
        if (this.slicePackageTable[1].title == '数据包数') {
          this.slicePackageTable.pop()
          this.slicePackageTable.push({
            title: '流量大小',
            key: 'total',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          })
        }
      } else {
        this.fragmentTraffic = this.fragmentTraffic.map(item => {
          return {
            time: item.time,
            total: item.total,
            name: '数据包数'
          }
        })
        if (this.slicePackageTable[1].title == '流量大小') {
          this.slicePackageTable.pop()
          this.slicePackageTable.push({
            title: '数据包数',
            key: 'total',
            align: 'center',
            ellipsis: true,
            tooltip: true,
          })
        }
      }
    },

    changeslicePackageTable () {
      this.showslicePackageTable = !this.showslicePackageTable
    },
    //DSCP统计
    onChangeDSCPStatistics (val) {
      console.log('val:', val)
      console.log('=======', this.dscpProportion);

    },
    changeDSCPTable () {
      this.showDSCPStatisticsTable = !this.showDSCPStatisticsTable
    },

    // 获取数据
    trafficStatisticsEchart () {
      trafficStatisticsEchart().then(res => {
        if (res.code == 1) {
          console.log('====', res.data);
          this.summarizeData = res.data
          // 三层主机流量top
          this.totalFlow = this.sortTopFlow(res.data.l3DevicesTotalFlow, 'default')
          this.totalSession = this.sortTopSession(res.data.l3DevicesTotalSession, 'default')

          this.ipTotalFlow = this.sortTopFlow(res.data.ipConversationsTotalFlow, 'default')
          this.ipTotalSession = this.sortTopSession(res.data.ipConversationsTotalSession, 'default')
          // dscp
          this.dscpTrend = this.dscpDataLine(res.data.dscpTrendChart)
          this.dscpProportion = this.dscpDataBar(res.data.dscpProportionChart)
          this.dscpTrendTable = this.getDscpTable(res.data.dscpTrendChart)
          this.dscpProportionTable = this.getDscpTable(res.data.dscpProportionChart)

          // 分片
          this.fragmentTraffic = this.slicePackageTableList(res.data.fragmentTrafficSize)
          this.fraqmentData = this.slicePackageTableList(res.data.fragmentDataPackets)
          this.fragmentTrafficChart = this.sliceEchart(res.data.fragmentTrafficSize, '流量大小')
          this.fraqmentDataChart = this.sliceEchart(res.data.fragmentDataPackets, '数据包数')


          // 数据包
          this.packagesTrend = this.pageTableList(res.data.packagesTrendChart)
          this.packagesData = [res.data.packagesProportionChart]
          this.packagesTrendChart = this.packageChart(res.data.packagesTrendChart)
          this.packagesDataChart = this.packageBarChart(res.data.packagesProportionChart)


          // 以太网
          this.framesTrend = res.data.framesTrendChart
          this.framesTrendChart = this.packageTypeLineChart(res.data.framesTrendChart)
          this.framesData = this.framesDataTableList(res.data.framesProportionChart)
          this.framesDataChart = this.packageTypeBarChart(res.data.framesProportionChart)

          // 以太网帧长包数统计
          this.netLengthData = res.data.framesPackagesTrendChart
          this.netLengthChart = this.etherneLineBarChart(res.data.framesPackagesTrendChart)
          this.ethernetChart = this.ethernetBar(res.data.framesPackagesProportionChart)
          this.ethernetData = this.ethernetTableList(res.data.framesPackagesProportionChart)
          console.log('🚀 this.netLengthChart:', this.netLengthChart)

          // IP协议包数统计
          this.ipProtocolsData = res.data.ipProtocolsTrendChart
          this.ipProtocolsTrendChart = this.ipProtoLineChart(res.data.ipProtocolsTrendChart)
          this.ipProtocolData = this.ipProtoTableList(res.data.ipProtocolProportionChart)
          this.ipProtocolChart = this.ipProtoBar(res.data.ipProtocolProportionChart)


          // 默认值显示
          this.hostList = this.totalFlow
          this.pairList = this.ipTotalFlow

        } else {
          this.$Message.warning(res.message)
        }
      }).catch(error => {
        this.$Message.error(error)
      })
    },

    // 总流量排序
    sortTopFlow (list, type) {
      let arr = list.sort((a, b) => {
        return b.totalBytes - a.totalBytes
      })
      let arr1 = arr.map((item, index) => {
        return {
          ...item,
          name: item.ipAAddress || item.ipAddress,
          flow: item.totalBytes,
          width: ((item.totalBytes / arr[0].totalBytes) * 100) + '%',
          color: this.color[index]
        }
      })
      return arr1
    },

    // 会话排序
    sortTopSession (list, type) {
      let arr = list.sort((a, b) => {
        return b.establishedSessions - a.establishedSessions
      })
      let arr1 = arr.map((item, index) => {
        return {
          ...item,
          name: item.ipAAddress || item.ipAddress,
          flow: item.establishedSessions,
          width: ((item.establishedSessions / arr[0].establishedSessions) * 100) + '%',
          color: this.color[index]
        }
      })

      // if (type == 'default') {
      //   this.hostList = arr1
      //   this.pairList = arr1
      // }
      // console.log('🚀 ~ file: summarize.vue:135 ~ arr1 ~ arr1:', arr1)
      // this.topArr = arr1
      return arr1
    },

    // dscp bar数据处理
    dscpDataBar (list) {
      let arr = [], obj = {
        name: [],
        total: [],
        table: []
      }
      if (list && list.length > 0) {
        list.forEach(item => {
          obj.name.push(item.type)
          obj.total.push(item.totalBytes || item.totalPackets)
          obj.table.push({
            name: item.type,
            time: this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"),
            total: item.totalBytes || item.totalPackets,
          })
        })
      }
      return obj;
    },

    // dscp line数据处理
    dscpDataLine (list) {
      let arr = []
      list.forEach((item, index) => {
        // 简单
        arr.push({
          name: item.type,
          total: item.totalBytes,
          time: this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss")
        })

      })


      // 拿到name \ 对象数组处理
      let tempArr = [];
      let Data = [];
      for (let i = 0; i < list.length; i++) {
        if (tempArr.indexOf(list[i].type) === -1) {
          Data.push({
            name: list[i].type,
            total: [list[i].totalBytes || 0],
            time: [this.$Moment(list[i].timestamp).format("YYYY-MM-DD HH:mm:ss")]
          });
          tempArr.push(list[i].type);
        } else {
          for (let j = 0; j < Data.length; j++) {
            if (Data[j].name == list[i].type) {
              Data[j].total.push(list[i].totalBytes);
              Data[j].time.push(this.$Moment(list[i].timestamp).format("YYYY-MM-DD HH:mm:ss"));
              break;
            }
          }
        }
      }

      return Data;
    },

    getDscpTable (list) {
      let arr = []
      list.forEach((item, index) => {
        arr.push({
          name: item.type,
          time: this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"),
          total: item.totalBytes || item.totalPackets,
        })
      })
      return arr;
    },

    // 分片包
    slicePackageTableList (list) {
      let arr = []
      list.forEach(item => {
        arr.push({
          time: this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"),
          total: item.fragmentTotalPackets
        })
      })
      return arr;
    },
    sliceEchart (list, type) {
      let arr = [{ time: [], total: [], name: '' }]
      list.forEach(item => {
        arr[0].time.push(this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"),)
        arr[0].total.push(item.fragmentTotalPackets)
        arr[0].name = type
      })
      return arr;
    },

    // 数据包
    packageBarChart (list) {
      let obj = {
        name: [],
        total: []
      }
      if (list) {
        for (let key in list) {
          //遍历对象属性
          // console.log(key)
          //遍历对象属性值
          // console.log(list[key])
          if (key == 'multicastBytes') {
            obj.name.push('多播数据包流量')
            obj.total.push(list[key] || 0)
          } else if (key == 'broadcastBytes') {
            obj.name.push('广播数据包流量')
            obj.total.push(list[key] || 0)
          } else if (key == 'unicastBytes') {
            // unicastBytes
            obj.name.push('单播数据包流量')
            obj.total.push(list[key] || 0)
          }
        }
      }
      return obj;
    },
    packageChart (list) {
      let obj = {
        name: '单播数据包流量',
        total: [],
        time: []
      }, obj2 = {
        name: '广播数据包流量',
        total: [],
        time: []
      }
        , obj3 = {
          name: '多播数据包流量',
          total: [],
          time: []
        }, arr = []
      if (list && list.length > 0) {
        list.forEach(item => {
          obj.total.push(item.unicastBytes)
          obj.time.push(this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"))
          obj2.total.push(item.broadcastBytes)
          obj3.total.push(item.multicastBytes)

        })
      }
      arr.push(obj, obj2, obj3)
      return arr;
    },
    pageTableList (list) {
      let arr = []
      if (list && list.length > 0) {
        list.forEach(item => {
          arr.push({
            time: this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss"),
            unicastBytes: item.unicastBytes,
            broadcastBytes: item.broadcastBytes,
            multicastBytes: item.multicastBytes,
          })
        })
      }
      return arr;
    },

     // 以太网
    packageTypeBarChart (list) {
      let obj = {
        name: [],
        total: []
      }
      if (list) {
        for (let key in list) {
          //遍历对象属性
          // console.log(key)
          //遍历对象属性值
          // console.log(list[key])
          if (key == 'arpFrames') {
            obj.name.push('APR数据包')//
            obj.total.push(list[key] || 0)
          } else if (key == 'ieee8021xFrames') {
            obj.name.push('ieee802.1x数据包')
            obj.total.push(list[key] || 0)
          } else if (key == 'ipv4Frames') {
            obj.name.push('IPv4数据包')
            obj.total.push(list[key] || 0)
          }else if (key == 'ipv6Frames') {
            obj.name.push('IPv6数据包')
            obj.total.push(list[key] || 0)
          }else if (key == 'ipxFrames') {
            obj.name.push('IPX数据包')
            obj.total.push(list[key] || 0)
          }else if (key == 'lacpFrames') {
            obj.name.push('LACP数据包')
            obj.total.push(list[key] || 0)
          }else if (key == 'mplsFrames') {
            obj.name.push('MPLS数据包')//
            obj.total.push(list[key] || 0)
          }else if (key == 'otherFrames') {
            obj.name.push('其他类型数据包')//
            obj.total.push(list[key] || 0)
          }else if (key == 'stpFrames') {
            obj.name.push('STP数据包')
            obj.total.push(list[key] || 0)
          }
        }
      }
      return obj;
    },

    framesDataTableList (list) {
      let arr = []
      if (list) {
        for (let key in list) {
          let obj = {
            name: '',
            total: ''
          }
          if (key == 'arpFrames') {
            obj.name = 'APR数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'ieee8021xFrames') {
            obj.name = 'ieee802.1x数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'ipv4Frames') {
            obj.name = 'IPv4数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'ipv6Frames') {
            obj.name = 'IPv6数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'ipxFrames') {
            obj.name = 'IPX数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'lacpFrames') {
            obj.name = 'LACP数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'mplsFrames') {
            obj.name = 'MPLS数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'otherFrames') {
            obj.name = '其他类型数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'stpFrames') {
            obj.name = 'STP数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          }
        }
      }
      // console.log('=====',arr);
      return arr;
    },
    packageTypeLineChart (list) {
      let arr = []

      let tempArr = [];
      let Data = [];
      if (list && list.length > 0) { // 处理成对象数组
        list.forEach(item => {
          for (let key in item) {
            let obj = {
              name: '',
              total: '',
              time: ''
            }
            obj.time = this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss")
            if (key == 'arpFrames') {
              obj.name = 'APR数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'ieee8021xFrames') {
              obj.name = 'ieee802.1x数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'ipv4Frames') {
              obj.name = 'IPv4数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'ipv6Frames') {
              obj.name = 'IPv6数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'ipxFrames') {
              obj.name = 'IPX数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'lacpFrames') {
              obj.name = 'LACP数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'mplsFrames') {
              obj.name = 'MPLS数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'otherFrames') {
              obj.name = '其他类型数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'stpFrames') {
              obj.name = 'STP数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            }
          }
        })
      }

      if (arr && arr.length > 0) {// 拿到name \ 对象数组处理
        for (let i = 0; i < arr.length; i++) {
          if (tempArr.indexOf(arr[i].name) === -1) {
            Data.push({
              name: arr[i].name,
              total: [arr[i].total || 0],
              time: [arr[i].time]
            });
            tempArr.push(arr[i].name);
          } else {
            for (let j = 0; j < Data.length; j++) {
              if (Data[j].name == arr[i].name) {
                Data[j].total.push(arr[i].total);
                Data[j].time.push(arr[i].time);
                break;
              }
            }
          }
        }
      }
      return Data;
    },

    // ip协议 bar
    ipProtoBar (list) {
      let obj = {
        name: [],
        total: []
      }
      if (list) {
        for (let key in list) {
          //遍历对象属性
          // console.log(key)
          //遍历对象属性值
          // console.log(list[key])
          if (key == 'icmp6TotalPackets') {
            obj.name.push('ICMP6总数据包')
            obj.total.push(list[key] || 0)
          } else if (key == 'icmpTotalPackets') {
            obj.name.push('ICMP总数据包')
            obj.total.push(list[key] || 0)
          } else if (key == 'otherTotalPackets') {
            // unicastBytes
            obj.name.push('其他总数据包')
            obj.total.push(list[key] || 0)
          }else if (key == 'tcpTotalPackets') {
            // unicastBytes
            obj.name.push('TCP总数据包')
            obj.total.push(list[key] || 0)
          }else if (key == 'udpTotalPackets') {
            // unicastBytes
            obj.name.push('UDP总数据包')
            obj.total.push(list[key] || 0)
          }
        }
      }
      return obj;
    },
    ipProtoTableList (list) {
      let arr = []
      if (list) {
        for (let key in list) {
          let obj = {
            name: '',
            total: ''
          }
          if (key == 'icmp6TotalPackets') {
            obj.name = 'ICMP6总数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'icmpTotalPackets') {
            obj.name = 'ICMP总数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'tcpTotalPackets') {
            obj.name = 'TCP总数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'udpTotalPackets') {
            obj.name = 'UDP总数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'otherTotalPackets') {
            obj.name = '其他总数据包'
            obj.total = list[key] || 0
            arr.push(obj)
          }
        }
      }
      // console.log('=====', arr);
      return arr;
    },
    // line
    ipProtoLineChart (list) {
      let arr = []
      let tempArr = [];
      let Data = [];
      if (list && list.length > 0) { // 处理成对象数组
        list.forEach((item, index) => {
          for (let key in item) {
            let obj = {
              name: '',
              total: '',
              time: ''
            }
            obj.time = item.timestamp ? this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss") : index + 1
            if (key == 'icmp6TotalPackets') {
              obj.name = 'ICMP6总数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'icmpTotalPackets') {
              obj.name = 'ICMP总数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'tcpTotalPackets') {
              obj.name = 'TCP总数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'udpTotalPackets') {
              obj.name = 'UDP总数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'otherTotalPackets') {
              obj.name = '其他总数据包'
              obj.total = item[key] || 0
              arr.push(obj)
            }
          }
        })
      }

      if (arr && arr.length > 0) {// 拿到name \ 对象数组处理
        for (let i = 0; i < arr.length; i++) {
          if (tempArr.indexOf(arr[i].name) === -1) {
            Data.push({
              name: arr[i].name,
              total: [arr[i].total || 0],
              time: [arr[i].time]
            });
            tempArr.push(arr[i].name);
          } else {
            for (let j = 0; j < Data.length; j++) {
              if (Data[j].name == arr[i].name) {
                Data[j].total.push(arr[i].total);
                Data[j].time.push(arr[i].time);
                break;
              }
            }
          }
        }
      }
      return Data;
    },

    // 以太网帧长 
    ethernetBar (list) {
      let obj = {
        name: [],
        total: []
      }
      if (list) {
        for (let key in list) {
          if (key == 'bigPackets') {
            obj.name.push('256~511字节')
            obj.total.push(list[key] || 0)
          } else if (key == 'hugePackets') {
            obj.name.push('1024~1517字节')
            obj.total.push(list[key] || 0)
          } else if (key == 'jumboPackets') {
            obj.name.push('大于1518字节')
            obj.total.push(list[key] || 0)
          }else if (key == 'largePackets') {
            obj.name.push('512~1023字节')
            obj.total.push(list[key] || 0)
          }else if (key == 'mediumPackets') {
            obj.name.push('128~255字节')
            obj.total.push(list[key] || 0)
          }else if (key == 'smallPackets') {
            obj.name.push('65~127字节')
            obj.total.push(list[key] || 0)
          }else if (key == 'tinyPackets') {
            obj.name.push('小于64字节')
            obj.total.push(list[key] || 0)
          }
        }
      }
      return obj;
    },
    ethernetTableList (list) {
      let arr = []
      if (list) {
        for (let key in list) {
          let obj = {
            name: '',
            total: ''
          }
          if (key == 'bigPackets') {
            obj.name = '256~511字节'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'hugePackets') {
            obj.name = '1024~1517字节'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'jumboPackets') {
            obj.name = '大于1518字节'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'largePackets') {
            obj.name = '512~1023字节'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'mediumPackets') {
            obj.name = '128~255字节'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'smallPackets') {
            obj.name = '65~127字节'
            obj.total = list[key] || 0
            arr.push(obj)
          } else if (key == 'tinyPackets') {
            obj.name = '小于64字节'
            obj.total = list[key] || 0
            arr.push(obj)
          }
        }
      }
      console.log('=====', arr);
      return arr;
    },
    // line bar
    etherneLineBarChart (list) {
      let arr = []
      let tempArr = [];
      let Data = [];
      if (list && list.length > 0) { // 处理成对象数组
        list.forEach((item, index) => {
          item.average = (item.bigPackets + item.hugePackets + item.jumboPackets + item.largePackets + item.mediumPackets + item.smallPackets + item.tinyPackets) / 7
          for (let key in item) {
            let obj = {
              name: '',
              total: '',
              time: ''
            }
            obj.time = item.timestamp ? this.$Moment(item.timestamp).format("YYYY-MM-DD HH:mm:ss") : index + 1
            if (key == 'bigPackets') {
              obj.name = '256~511字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'hugePackets') {
              obj.name = '1024~1517字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'jumboPackets') {
              obj.name = '大于1518字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'largePackets') {
              obj.name = '512~1023字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'mediumPackets') {
              obj.name = '128~255字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'smallPackets') {
              obj.name = '65~127字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'tinyPackets') {
              obj.name = '小于64字节'
              obj.total = item[key] || 0
              arr.push(obj)
            } else if (key == 'average') {
              obj.name = '平均帧长'
              obj.total = item[key] || 0 
              arr.push(obj)
            }

          }
        })
      }

      //toFixed(1) 保留一位小数 Math.round() 取整
      if (arr && arr.length > 0) {// 拿到name \ 对象数组处理
        for (let i = 0; i < arr.length; i++) {
          if (tempArr.indexOf(arr[i].name) === -1) {
            Data.push({
              name: arr[i].name,
              total: [Math.round(arr[i].total) || 0], 
              time: [arr[i].time]
            });
            tempArr.push(arr[i].name);
          } else {
            for (let j = 0; j < Data.length; j++) {
              if (Data[j].name == arr[i].name) {
                Data[j].total.push(Math.round(arr[i].total) || 0); 
                Data[j].time.push(arr[i].time);
                break;
              }
            }
          }
        }
      }
      return Data;
    }



  },
}
</script>

<style scoped>
.col_display {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}
.header_box_value {
  width: 16%;
  height: 65px;
  padding: 11px;
  border: 1px solid #999;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
}
.header_box_value div:first-child {
  margin-bottom: 8px;
}
.header_value {
  font-size: 17px;
}

.margin_top_10 {
  margin-top: 10px;
}
.draw_box {
  width: 49%;
  height: 300px;
  border: 1px solid #999;
  border-radius: 10px;
}
.draw_box_header {
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
  border-bottom: 1px solid #999;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.draw_box_content_old {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  height: 25px;
  line-height: 25px;
  margin: 5px 10px 0px 10px;
  border-radius: 12px;
}

.draw_box_content {
  padding: 10px;
  overflow: auto;
  height: 250px;
}
.draw_box_content_echart {
  padding: 10px 10px 0px 10px;
  overflow: auto;
  height: 250px;
}
.draw_box_item_content {
  display: flex;
}
.label_key {
  position: relative;
  flex: 1 1;
  height: 24px;
  margin-bottom: 4px;
  line-height: 24px;
}
.label {
  position: absolute;
  left: 4px;
  display: inline-block;
  text-align: left;
}
.pillar {
  display: inline-block;
  width: 100%;
  height: 24px;
  overflow: hidden;
  border-radius: 12px;
}
.value {
  position: absolute;
  right: 4px;
  text-align: right;
  width: 72px;
}

.summarize .table_scroll >>> ::-webkit-scrollbar,
.summarize .draw_box_content::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px !important; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.summarize .draw_box_content::-webkit-scrollbar-thumb {
  /*滚动条里面小方块样式*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(209, 209, 209, 0.6);
}
.summarize .draw_box_content::-webkit-scrollbar-track {
  /*滚动条里面轨道样式*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  background: rgba(179, 179, 179, 0.1);
}
</style>